import React from 'react';
import PropTypes from 'prop-types';
import styles from './TodoList.css'
import { Button } from 'antd';

const TodoList = ({ onDelete, todos }) => {
    const columns = todos.map(({ name, id }) => (
        <li key={id}>
            <div className={styles.inline}>
                <p>{name}</p>
                <Button onClick={() => onDelete(id)}>删除</Button>
            </div>
        </li>
    ))
    return (
        <ul>{columns}</ul>
    );
};

TodoList.propTypes = {
    onDelete: PropTypes.func.isRequired,
    todos: PropTypes.array.isRequired,
};

export default TodoList;